<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Gnatoo</title>

<link href="style.css" rel="stylesheet" type="text/css" />
	
<link href="jslibraries/jquery/css/smoothness/jquery-ui-1.8.14.custom.css" rel="stylesheet" type="text/css" />

<link href="css/examples/tables/bluetablesorter/style.css"
	rel="stylesheet" type="text/css" />
<link href="css/examples/tabs/simple.css" rel="stylesheet" type="text/css" />
<link href="css/examples/trees/simple.css"
	rel="stylesheet" type="text/css" />

<script type="text/javascript" src="jslibraries/jquery/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="jslibraries/jquery/jquery-ui-1.8.14.custom.min.js"></script>
<script type="text/javascript" src="jslibraries/jquery/jquery.layout.js"></script>
<script type="text/javascript" src="jslibraries/jquery/jquery.simplemodal-1.4.1.js"></script>

<script type="text/javascript" src="gnatoo/gnatoo.js"></script>

<script type="text/javascript" src="jslibraries/data/BaseListDataProvider.js"></script>
<script type="text/javascript" src="jslibraries/data/TreeDataProvider.js"></script>

</head>

<body>
<form>

<script type="text/javascript">
var treeData = {
		rootNode : {
			id : 'root',
			state : 'open',
			firstNode : {id : 'first',state : 'leaf',price : 11.04},
			
			secondNode : {id : 'second',state : 'leaf',price : 22.05},
			
			nodes : [ 
				{id : '1',state : 'open',price : 333333.03,
					nodes : [ {	id : '11',state : 'leaf',price : 22.05}, 
						  { id : '12',state : 'leaf',price : 22.05}, 
						  { id : '13',state : 'leaf',price : 22.05}]}, 
						  
				{id : '2',state : 'open',price : 27.00,
					firstNode : {id : 'first in 2',	state : 'leaf',	price : 1199999999999.04}}, 
				{id : '3',state : 'leaf',price : 28.00} ],
		},
		
		toggleNode : function(node) {
			if (node.state == 'leaf') return;

			if (node.state == 'open') {
				node.state = 'closed';
				return;
			}
			if (node.state == 'closed') {
				node.state = 'open';
			}
		}
	};
</script>
<div id="Simpletree" >
<script type="text/html">
  <ul class="treeview">
	<tree value="#{.treeData.rootNode}" var="node">
		<li class="#{.node.state}" onclick="#{.treeData.toggleNode(.node)}">
			<span>#{.node.id}</span>

		<ul rendered="#{.node.firstNode != null &amp;&amp; .node.state == 'open'}">
			<tree value="#{.node.firstNode}" />		
		</ul>
		<ul rendered="#{.node.secondNode != null &amp;&amp; .node.state == 'open'}">
			<tree value="#{.node.secondNode}" />		
		</ul>
		<ul rendered="#{.node.nodes != null &amp;&amp; .node.state == 'open'}">
			<loop value="#{.node.nodes}" var="child">
				<tree value="#{.child}" />		
			</loop>
		</ul>

		</li>	
	</tree>
  </ul>
</script>
</div>
<script>
$(document).ready( function() { 
	// init context
	var gnatooContext = window.gnatoo.initByName('Simpletree'); 
	// bind model
	gnatooContext.data['treeData'] = treeData;
	// render
	gnatooContext.render();
});
</script>


<!-- <jsp:include page="tutorials/Tables/Treetable/Treetable.html"
	flush="false"></jsp:include>
 -->

</form>
<pre id="mylog" style="font-size: 1.0em; display : block"></pre>
</body>
</html>


